<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>可视域分析</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        'use strict';
        //定义三维视图的主要类
        var webGlobe;
        //定义三维瓦片类
        var landscapeLayer;
        //定义可视域分析类
        var viewshed3d;
        //是否可以开始可视域分析
        var viewshedAn = true;
        //是否已选择观察点
        var viewshed3ding = false;
        //加载三维视图
        function init() {
            //构造三维视图类（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {
                terrainExaggeration: 1
            });
            webGlobe.showPosition();
            if (webGlobe) {
                //构造第三方图层对象
                var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                    viewer: webGlobe.viewer
                });
                //加载天地图
                var tdtLayer = thirdPartyLayer.appendTDTuMap({
                    //天地图经纬度数据
                    url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
                    //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
                    token: "9c157e9585486c02edf817d2ecbc7752",
                    //地图类型 'vec'矢量 'img'影像 'ter'地形
                    ptype: "img"
                });

                //初始化视图功能管理类
                var sceneManager = new CesiumZondy.Manager.SceneManager({
                    viewer: webGlobe.viewer
                });
                //视点跳转
                sceneManager.flyToEx(114.40298522106733, 30.465568703723072, {
                    height: 100.85856618500283,
                    heading: -45.4940479913348135,
                    pitch: -15,
                    roll: 0
                });
                //构造M3D模型层管理对象
                var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                    viewer: webGlobe.viewer
                });
                //加载M3D地图文档（服务地址，配置参数）
                var {
                    protocol,
                    ip,
                    port
                } = window.webclient;
                landscapeLayer = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/ZondyModels`, {
                    autoReset: false,
                    maximumScreenSpaceError: 8,
                    loaded: function(layer) {
                        //获取三位场景视图对象
                        var viewer = webGlobe.viewer;
                        //初始化高级分析功能管理类
                        var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({
                            viewer: viewer
                        });
                        //创建可视化分析对象
                        viewshed3d = advancedAnalysisManager.createViewshedAnalysis();
                        //鼠标左键事件
                        function left(movement) {
                            //已有，先清除
                            if (!viewshedAn) {
                                viewshedAn = true;
                                //移除分析显示结果
                                webGlobe.viewer.scene.VisualAnalysisManager.removeAll();
                                //创建可视化分析对象
                                viewshed3d = advancedAnalysisManager.createViewshedAnalysis();
                            }
                            //获取鼠标位置
                            var cartesian = viewer.getCartesian3Position(movement.position, cartesian);
                            //选中点并且没有观察点
                            if (cartesian != undefined && !viewshed3ding) {
                                //抬高观察点0.5m
                                cartesian.z += 0.5;
                                //设置观察点坐标
                                viewshed3d.viewPosition = cartesian;
                                //设置已存在观察点
                                viewshed3ding = true;
                                //添加可视域分析结果显示
                                viewer.scene.VisualAnalysisManager.add(viewshed3d);
                            }
                            //有观察点 
                            else {
                                //设置可视域结果点
                                viewshed3d.targetPosition = cartesian;
                                //完成可视域分析，设置没有观察点
                                viewshed3ding = false;
                                viewshedAn = false;
                            }
                        }
                        //鼠标右键结束
                        function right(movement) {
                            //有观察点
                            if (viewshed3ding) {
                                var cartesian = viewer.getCartesian3Position(movement.position, cartesian);
                                //设置可视域结果点
                                viewshed3d.targetPosition = cartesian;
                            }
                            viewshed3ding = false;
                            viewshedAn = false;
                        }

                        function move(movement) {
                            if (viewshed3ding) {
                                var cartesian = viewer.getCartesian3Position(movement.endPosition, cartesian);
                                if (cartesian) {
                                    viewshed3d.targetPosition = cartesian;
                                }
                            }
                        }
                        //注册事件
                        webGlobe.registerMouseEvent('LEFT_CLICK', left);
                        webGlobe.registerMouseEvent('RIGHT_CLICK', right);
                        webGlobe.registerMouseEvent('MOUSE_MOVE', move);
                    }
                })
            }
        }

        function stopviewshedAn() {
            //注销事件
            webGlobe.unRegisterMouseEvent('LEFT_CLICK');
            webGlobe.unRegisterMouseEvent('RIGHT_CLICK');
            webGlobe.unRegisterMouseEvent('MOUSE_MOVE');
            //移除分析显示结果
            webGlobe.viewer.scene.VisualAnalysisManager.removeAll();
        }
    </script>
</head>

<body onload="init()">
    <div id="GlobeView">
        <div class="message" style="left: 10px;">
            <font>鼠标左键选择观察点</font>
            <br />
            <font>点击鼠标左键或右键完成可视域分析</font>
        </div>
    </div>
</body>

</html>